<template>
  <div>
    <div class="main">
      <van-tabs v-model="activeName">
        <van-tab title="用户注册" name="a">
          <van-field v-model="loginName" left-icon="contact" placeholder="请输入账号"/>
          <van-field v-model="phonenumber" placeholder="请输入电话号" left-icon="phone-o"/>
          <van-field v-model="code" placeholder="请输入验证码" left-icon="comment-o" style="width: 50%; float: left;"/>
          <!--        <van-button :color="!disabled?'#f8c66b':'#999999'"-->
          <!--                    style="width: 40%; margin-left:5%; border-radius: 10px; float: left;"-->
          <!--                    @click="verification($event)"><p v-if="!disabled">获取验证码</p><p-->
          <!--            v-else>{{time}}</p></van-button>-->
          <van-button :color="!disabled?'#f8c66b':'#999999'"
                      style="width: 40%; margin-left:5%; border-radius: 10px; float: left;"
                      @click="verification($event)"><p v-if="!disabled">获取验证码</p><p
              v-else>{{time}}</p></van-button>
          <van-field v-model="password" type="password" left-icon="bag-o" placeholder="请输入密码"/>
          <van-field v-model="password2" type="password" left-icon="bag-o" placeholder="请再次输入密码"/>
          <van-button type="info" style="width: 80%;margin-top: 30px; border-radius: 30px;background-color: #f8c66b; border: 1px solid #ffa500;font-size: large;"
                      @click="resigered">修改密码
          </van-button>
        </van-tab>
      </van-tabs>
      <div class="footer">
        <span @click="login">去登录</span> | <span @click="regis">立即注册</span>
      </div>
    </div>
  </div>
</template>

<script>
import {getRegister, getSMSverification} from "@/api/api-Login";

export default {
  name: "Register",
  data(){
    return{
      activeName:"",
      loginName:"",
      phonenumber:"",
      userName:"",
      code:"",
      password:"",
      password2:"",
      disabled:false,
      time:60,
    }
  },
  methods:{
    login(){
      this.$router.push('/Login')
    },
    verification(e){
      getSMSverification(this.phonenumber).then(res=>{
        console.log(res)
        if(res.code ==0){
          e.target.disabled=true;
          this.disabled=true;
          clearInterval(time);
          let time=setInterval(()=>{
            if(this.time>0){
              this.time--;
            }else {
              this.time=60;
              e.target.disabled=false;
              this.disabled=false;
              clearInterval(time)
            }
          },1000)
        }else {
          this.$toast(res.msg)
        }
      })
    },
    resigered(){
      if(this.loginName=="" && this.code=="" && this.password=="" && this.password2=="" && this.phonenumber==""){
        this.$toast("填写不完整")
      }else if(this.password!=this.password2){
        this.$toast('两次密码不同')
      }else {
        // let logindata = new FormData
        // logindata.append('username', this.username)
        // logindata.append('password', this.password)
        // logindata.append('loginName', this.loginName)
        // logindata.append('code', this.code)
        // logindata.append('phonenumber', this.phonenumber)

        // let data = {'username': this.newUsername, 'password': this.newPassword}
        getRegister(this.loginName,this.code,this.phonenumber,this.password).then(res=>{
          this.$toast(res.msg);
          if(res.code===0){
            this.$router.push('/Login')
          }
        })
      }
    },
    regis(){
      this.$router.push('/Login/Register');
    }
  },

}
</script>

<style scoped>

.footer {
  margin-top: 50px;
  text-align: center;
  font-size: 17px;
}
span{
  margin: 0 20px;
}
span:hover{
  color:orange;
}
.main{
  margin-top: 100px;

  text-align: center;
}
</style>